<template>
	<view class="page-content">
		<view>
			<u-tabs-swiper bar-width="342" active-color="#000000" inactive-color="#999999" :bar-style="{background:'#FCD610'}"
				ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
		</view>
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" :text="filterParmas.searchValue"
				@handleSearch="handleSearch"></custom-input>
		</view>

		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1;">
						<sort-tab sortText="离我最近" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
				</view>

				<scroll-view scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh" :show-scrollbar="false">
					<template v-if="dataList.length===0&&status==='nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<block v-for="(item,index) in dataList">
							<view class="cards" @click="checkedDetail(item)" :key="index">
								<checked-card :data="item"></checked-card>
							</view>
						</block>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1;">
						<sort-tab sortText="离我最近" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
				</view>

				<scroll-view scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh" :show-scrollbar="false">
					<template v-if="dataList.length===0&&status==='nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item,index) in dataList" :key="index" @click="checkedDetail(item)">
							<checked-card :data="item"></checked-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="add-btn"><add-btn
				:link="'/pages/index/pet-checked/add-checked/add-checked?companyType='+filterParmas.companyType"></add-btn>
		</view>
	</view>
</template>

<script>
	import checkedCard from "components/common/card/checked-card.vue";
	import customInput from "components/common/custom-input.vue";
	import sortTab from "components/index/cmbz/sort-tab.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import empty from "components/common/empty/empty.vue";
	import petChecked from "../../../../api/petChecked.js";
	import utils from "../../../../utils/util.js";
	export default {
		data() {
			return {
				list: [{
					name: '国内货代'
				}, {
					name: '国际货代'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				status: 'loadmore',
				dataList: [], //数据列表
				filterParmas: {
					// distanceSort: "",
					sortOrder: '',
					sort: '',
					searchValue: '',
					nowLat: 0,
					nowLng: 0,
					companyType: '1', //1国内，2国外
					pageNum: 0,
					pageSize: this.$config.pageSize,
				}, //筛选参数
				showrefresh: false,
			}
		},
		watch: {
			swiperCurrent: function(newvalue, oldvalue) {
				this.status = 'loadmore';
				this.dataList = [];
				this.filterParmas = {
					...this.filterParmas,
					sortOrder: '',
					sort: "",
					pageNum: 0,
					searchValue: '',
					companyType: newvalue !== 1 ? '1' : '2',
				};
				this.getCheckedList()
			},
		},
		onShow() {
			this.dataList = [];
			if (this.filterParmas.nowLat && this.filterParmas.nowLng) {
				this.getCheckedList();
			} else {
				utils.getLocationInfo().then(res => {
					this.filterParmas.nowLat = res.latitude;
					this.filterParmas.nowLng = res.longitude;
					this.getCheckedList();
				}).catch(err => {
					this.getCheckedList();
				})
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'loadmore')
					this.getCheckedList()
			},
			sortDistanceChanged(value) {
				console.log('距离切换', value, value === 'asc' ? '升序' : '降序');
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "distance";
				this.filterParmas.pageNum = 0;
				this.dataList = [];
				this.getCheckedList();
			},
			getCheckedList() {
				if (this.status !== 'loading') {
					this.status = "loading";
					this.filterParmas.pageNum++;
					petChecked.getPetCheckedCompanyList(this.filterParmas).then(res => {
						if (res.code === 200) {
							this.dataList.push(...res.rows);
							if (res.rows?.length < this.$config.pageSize)
								this.status = 'nomore'
							else {
								this.status = 'loadmore'
							}
							this.showrefresh = false;
						} else {
							throw Error()
						}
					}).catch(err => {
						this.status = 'nomore';
						this.showrefresh = false;
						console.log(err);
					});
				}
			},
			checkedDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/index/pet-checked/checked-detail/checked-detail?id=' + item.id
				})
			},
			handleSearch(val) {
				this.filterParmas.searchValue = val;
				this.filterParmas.pageNum = 0;
				this.dataList = [];
				this.getCheckedList()
			},
			handlerefresh() {
				this.showrefresh = true;
				this.filterParmas.pageNum = 0;
				this.dataList = [];
				this.getCheckedList();
			}
		},
		components: {
			checkedCard,
			customInput,
			sortTab,
			addBtn,
			empty
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;

		display: flex;
		flex-direction: column;

		.search-box {
			padding: 16rpx 32rpx 24rpx 32rpx;
		}

		.sort-box {
			display: flex;
			justify-content: cneter;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.swiper-box {
			flex: 1;

			.swiper-item {
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				.cards {
					margin-bottom: 32rpx;

					// &:first-child {
					// 	margin-top: 0;
					// }
				}
			}
		}

		.add-btn {
			position: absolute;
			bottom: 218rpx;
			right: 32rpx;
		}
	}
</style>